<script setup>
import { ref, onMounted } from 'vue'
import { initArticleData, articleListService, articleCategoryListService } from '@/api/article.js'

// 文章列表数据模型
const articles = ref([])
// 文章分类数据模型
const categorys = ref([])

// 回显文章分类
const getArticleCategoryList = async () => {
    let result = await articleCategoryListService()
    categorys.value = result.data
}

// 获取文章列表数据
const getArticleList = async () => {
    let params = {
        pageNum: 1,
        pageSize: 10
    }
    let result = await articleListService(params)
    articles.value = result.data.items

    // 处理数据，给数据模型扩展一个属性 categoryName，分类名称
    for (let i = 0; i < articles.value.length; i++) {
        let article = articles.value[i]
        for (let j = 0; j < categorys.value.length; j++) {
            if (article.categoryId == categorys.value[j].id) {
                article.categoryName = categorys.value[j].categoryName
            }
        }
    }
}

onMounted(async () => {
    await getArticleCategoryList()
    await getArticleList()
})
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>文章展示</span>
            </div>
        </template>
        <!-- 文章列表 -->
        <el-table :data="articles" style="width: 100%">
            <el-table-column label="文章标题" width="400" prop="title"></el-table-column>
            <el-table-column label="分类" prop="categoryName"></el-table-column>
            <el-table-column label="发表时间" prop="createTime"> </el-table-column>
            <el-table-column label="状态" prop="state"></el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
    </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>